<template>
  <div>
    <a-alert message="阿里云OSS" type="info" show-icon style="margin-bottom: 18px">
      <template #description>
        使用阿里云 对象存储OSS，开通地址：<a
          href="https://www.aliyun.com/product/oss?userCode=oeeqid0s"
          target="_blank"
          >点我开通</a
        >
      </template>
    </a-alert>
    <a-form
      ref="FormRef"
      :model="FormState"
      :rules="FormRule"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-item label="是否开启">
        <a-switch
          v-model:checked="FormState.open_bool"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item
        v-show="FormState.open_bool"
        label="AccessKeyId"
        has-feedback
        required
        name="key_id"
      >
        <a-input v-model:value="FormState.key_id" placeholder="请填写密钥ID" />
      </a-form-item>
      <a-form-item
        v-show="FormState.open_bool"
        label="AccessKeySecret"
        has-feedback
        required
        name="key_secret"
      >
        <a-textarea v-model:value="FormState.key_secret" placeholder="请填写访问密钥" :rows="2" />
      </a-form-item>
      <a-form-item
        v-show="FormState.open_bool"
        label="存储空间"
        has-feedback
        required
        name="bucket"
      >
        <a-input v-model:value="FormState.bucket" placeholder="请填写存储空间(Bucket)" />
      </a-form-item>
      <a-form-item v-show="FormState.open_bool" label="地域" has-feedback required name="region">
        <a-select v-model:value="FormState.region" placeholder="请选择地域">
          <a-select-option key="oss-cn-hangzhou">华东1（杭州）</a-select-option>
          <a-select-option key="oss-cn-shanghai">华东2（上海）</a-select-option>
          <a-select-option key="oss-cn-qingdao">华北1（青岛）</a-select-option>
          <a-select-option key="oss-cn-beijing">华北2（北京）</a-select-option>
          <a-select-option key="oss-cn-zhangjiakou">华北3（张家口）</a-select-option>
          <a-select-option key="oss-cn-huhehaote">华北5（呼和浩特）</a-select-option>
          <a-select-option key="oss-cn-wulanchabu">华北6（乌兰察布）</a-select-option>
          <a-select-option key="oss-cn-shenzhen">华南1（深圳）</a-select-option>
          <a-select-option key="oss-cn-heyuan">华南2（河源）</a-select-option>
          <a-select-option key="oss-cn-guangzhou">华南3（广州）</a-select-option>
          <a-select-option key="oss-cn-chengdu">西南1（成都）</a-select-option>
          <a-select-option key="oss-cn-hongkong">中国（香港）</a-select-option>
          <a-select-option key="oss-us-west-1">美国西部1（硅谷）</a-select-option>
          <a-select-option key="oss-us-east-1">美国东部1（弗吉尼亚）</a-select-option>
          <a-select-option key="oss-ap-southeast-1">亚太东南1（新加坡）</a-select-option>
          <a-select-option key="oss-ap-southeast-2">亚太东南2（悉尼）</a-select-option>
          <a-select-option key="oss-ap-southeast-3">亚太东南3（吉隆坡）</a-select-option>
          <a-select-option key="oss-ap-southeast-5">亚太东南5（雅加达）</a-select-option>
          <a-select-option key="oss-ap-northeast-1">亚太东北1（日本）</a-select-option>
          <a-select-option key="oss-ap-south-1">亚太南部1（孟买）</a-select-option>
          <a-select-option key="oss-eu-central-1">欧洲中部1（法兰克福）</a-select-option>
          <a-select-option key="oss-eu-west-1">英国（伦敦）</a-select-option>
          <a-select-option key="oss-me-east-1">中东东部1（迪拜）</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="FormState.open_bool" label="内网上传">
        <a-switch
          v-model:checked="FormState.is_internal_upload_bool"
          checked-children="开"
          un-checked-children="关"
        />
      </a-form-item>
      <a-form-item v-show="FormState.open_bool" label="自定义外网地址">
        <a-switch
          v-model:checked="FormState.is_define_url_bool"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item
        v-show="FormState.open_bool && FormState.is_define_url_bool"
        label="外网地址"
        name="web_url"
      >
        <a-textarea
          v-model:value="FormState.web_url"
          placeholder="请填写自定义外网访问地址"
          :rows="2"
        />
      </a-form-item>
      <a-form-item style="margin-left: 12.5%">
        <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
          提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, Switch } from 'ant-design-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getOssSetting, editOssSetting } from '@/api/system'

export default defineComponent({
  name: 'OssSetting',
  components: {
    [Row.name]: Row,
    [Switch.name]: Switch,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const state = reactive({
      ConfirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })
    const FormState = reactive({
      key_id: 'id',
      key_secret: 'secret',
      bucket: 'bucket',
      region: 'oss',
      is_internal_upload_bool: true,
      open_bool: true,
      is_define_url_bool: false,
      is_define_url: 0,
      web_url: '',
      is_internal_upload: 1,
      open: 1
    })
    const FormRule = {
      key_id: [{ required: true, message: '请填写密钥ID', trigger: ['blur', 'change'] }],
      key_secret: [{ required: true, message: '请填写访问密钥', trigger: ['blur', 'change'] }],
      bucket: [{ required: true, message: '请填写存储空间(Bucket)', trigger: ['blur', 'change'] }],
      is_internal_upload_bool: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'boolean' }
      ],
      is_internal_upload: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'number' }
      ],
      open_bool: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'boolean' }
      ],
      open: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'number' }
      ],
      is_define_url_bool: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'boolean' }
      ],
      is_define_url: [
        { required: false, message: '请填写短信签名', trigger: ['blur', 'change'], type: 'number' }
      ],
      web_url: [
        { required: false, message: '请填写自定义外网访问地址', trigger: ['blur', 'change'] }
      ],
      region: [{ required: true, message: '请选择地域', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getDataList()
    })

    const tabChange = () => {
      getDataList()
    }

    function getDataList() {
      getOssSetting({}).then((res) => {
        for (let item in res) {
          FormState[item] = res[item]
        }
        FormState.is_define_url_bool = FormState.is_define_url == 1 ? true : false
        FormState.is_internal_upload_bool = FormState.is_internal_upload == 1 ? true : false
        FormState.open_bool = FormState.open == 1 ? true : false
      })
    }
    const OnSubmit = () => {
      FormRef.value
        .validate()
        .then(() => {
          FormState.is_define_url = FormState.is_define_url_bool == true ? 1 : 0
          FormState.is_internal_upload = FormState.is_internal_upload_bool == true ? 1 : 0
          FormState.open = FormState.open_bool == true ? 1 : 0
          editOssSetting(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.ConfirmLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      FormRef,
      FormState,
      FormRule,
      tabChange,
      OnSubmit,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped></style>
